<template>
	<view class="content">
		<view class="box1">
			<uni-swiper-dot :info="info1" :current="current1" field="content" :mode="mode">
				<swiper autoplay class="swiper-box" @change="change1">
					<swiper-item v-for="(item, index) in info1" :key="index">
						<view class="swiper-item"><img :src="item.image" alt srcset /></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="box2">
			<uni-swiper-dot :info="info2" :current="current2" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change2">
					<swiper-item v-for="(item, index) in info2" :key="index">
						<view class="swiper-item1">
							<view class="item" :class="{ isboder: i < item.length - 1 }" v-for="(v, i) in item" :key="i">
								<p class="p1">{{ v.name }}</p>
								<p class="p2">{{ v.price }}</p>
								<view>
									<span>{{ v.range }}</span>
									<!--                                    <span>-0.08%</span> -->
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="line"></view>
		<uni-notice-bar single="true" show-icon="true" :text="text"></uni-notice-bar>
		<view class="guanyu">
			<view v-for="(item, index) in list3" :key="index" @click="gopage(item)">
				<img :src="item.icon" alt />
				<p>{{ item.name }}</p>
			</view>
		</view>
		<view class="tupian">
			<img :src="chongzhi" alt />
			<img :src="yaoqing" alt />
		</view>
		<view class="line"></view>
		<QSTabs activeColor="#3a73fe" :current="current_1" :tabs="tabs_1" width="250" @change="change($event, '1')" />
		<view class="zhixun">
			<view class="neirong1" v-if="current_1 == 0">
				<p v-if="!neirong1" class="cent1">已经是全部质询了</p>
				<p>{{ neirong1 }}</p>
			</view>
			<view class="neirong2" v-if="current_1 == 1">
				<p v-if="!neirong1" class="cent1">已经是全部质询了</p>
				<p>{{ neirong2 }}</p>
			</view>
			<view class="neirong3" v-if="current_1 == 2">
				<p v-if="!neirong1" class="cent1">已经是全部质询了</p>
				<p>{{ neirong3 }}</p>
			</view>
		</view>
	</view>
</template>

<script>
import uniSwiperDot from '../../../components/uni-swiper-dot/uni-swiper-dot.vue';
import banner1 from '../../../static/banner1.png';
import banner2 from '../../../static/banner2.png';
import chongzhi from '../../../static/chongzhi.png';
import yaoqing from '../../../static/yaoqing.png';
import logo from '../../../static/logo.png';
import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
import { uniNoticeBar } from '@dcloudio/uni-ui';
import { getAllIndex, getNotice } from '../../../server/api.js';
import { baseUrl } from '../../../server/api.config';
export default {
	components: { uniSwiperDot, uniNoticeBar, QSTabs },
	data() {
		return {
			title: 'Hello',
			chongzhi,
			yaoqing,
			tabs_1: ['要闻', '快讯', '解盘'],
			current_1: 0,
			info1: [
				{
					image: banner1
				},
				{
					image: banner2
				}
			],
			info2: [[], [], [], []],
			list3: [
				{
					name: '关于我们',
					icon: logo
				},
				{
					name: '新手入门',
					icon: logo,
					url: '../../xinshou/xinshou'
				},
				{
					name: '问题反馈',
					icon: logo
				},
				{
					name: '财经日历',
					icon: logo
				}
			],
			text: 'eBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏',
			current1: 0,
			current2: 0,
			neirong1: '',
			neirong2: '',
			neirong3: '',
			mode: 'default'
		};
	},
	onLoad() {
		this.getAllIndexData();
		this.getNoticeList();
		let that = this;
		// setInterval(() => {
		// 	// 定时调用
		// 	that.getAllIndexData();
		// 	// that.getNoticeList();
		// }, 10000);
	},
	methods: {
		gopage(item) {
			if (item.url) {
				uni.navigateTo({
					url: item.url
				});
			}
		},
		change1(e) {
			this.current1 = e.detail.current;
		},
		change2(e) {
			this.current2 = e.detail.current;
		},
		change(index, i) {
			this['current_' + i] = index;
		},
	
		getNoticeList: async function() {
			let data = await getNotice();
			if (data.result == 0) {
				this.text = data.data[0].Content;
			} else {
				this.text = '暂无公告！';
			}
		},
		getAllIndexData: async function() {
			// 获取全部指数
			let that = this;
			let data = await getAllIndex();
			console.log(data);
			let size = 3;
			let position = 0;
			that.info2 = [[], [], [], []];
			data.forEach(val => {
				val.name = val.instrument_id.split('-')[0];
				val.price = val.last;
				let mean = (Number(val.high_24h) + Number(val.low_24h)) / 2;
				console.log(mean);
				let range = ((Number(val.last) - Number(mean)) / Number(mean)) * 100;
				val.range = range.toFixed(2);
			});
			that.info2 = that.arrTrans(3, data);
		},
		arrTrans(num, arr) {
			// 一维数组转换为二维数组
			const iconsArr = []; // 声明数组
			arr.forEach((item, index) => {
				const page = Math.floor(index / num); // 计算该元素为第几个素组内
				if (!iconsArr[page]) {
					// 判断是否存在
					iconsArr[page] = [];
				}
				iconsArr[page].push(item);
			});
			return iconsArr;
		}
	}
};
</script>

<style lang="less">
.content {
	text-align: center;
	height: 400upx;
}
.logo {
	height: 200upx;
	width: 200upx;
	margin-top: 200upx;
}
.red {
	color: #f64e45;
}
.green {
	color: #ffffff;
}
.title {
	font-size: 36upx;
	color: #8f8f94;
}
.swiper-item img {
	width: 100%;
}
.swiper-item1 {
	display: flex;
	padding-top: 30upx;
	// justify-content: space-around;
	.item {
		width: 30%;
		margin-left: 5%;
		.p1 {
			font-size: 26upx;
		}
		.p2 {
			margin-top: 10upx;
			font-size: 38upx;
		}
		view {
			height: 32upx;
			font-size: 26upx;
			margin-top: 16upx;
			span {
				margin: 0 8upx;
			}
		}
		&.isboder {
			border-right: 1px solid #ccc;
		}
	}
}
.box2 {
	uni-swiper {
		height: 100px;
	}
}
.swiper-box {
}
// .swiper-item1{
// 	height: 100upx;
// }
.guanyu {
	display: flex;
	justify-content: space-around;
	view {
		padding: 30upx 0;
		img {
			width: 70upx;
			height: 70upx;
		}
		p {
			font-size: 30upx;
		}
	}
}
.tupian {
	display: flex;
	height: 200upx;
	// padding: 3%;
	img {
		width: 44%;
		height: 100%;
		margin: 0 3%;
	}
}
.zhixun {
	width: 100%;
	border-top: 1px solid #ddd;
	padding: 20upx 0upx;
	p {
		font-size: 30upx;
		color: #666;
	}
	.cent1 {
		text-align: center;
	}
}
</style>
